<html>
<head>
<title>Graph demo</title>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script> 
<script language="javascript" type="text/javascript" src="jquery.flot.min.js"></script>

</head>
<body>
<h1>Graph</h1>
<div>Bearing: <div id="ehr" style="display: inline;"/></div>
<div id="graph" style="width:300px;height:300px;"></div> 
<div>

</div>
<script type="text/javascript">
var droid = new Android();
var display = function(data) {
var d1 = [ [ 0 , 0 ], [ data.data.xMag, data.data.yMag ]];
  // from http://www.movable-type.co.uk/scripts/os-grid-dist.html
 // arctan gives us the bearing, just need to convert -pi..+pi to 0..360 deg
  var deg = 360-((90-(Math.atan2(data.data.yMag, data.data.xMag)/Math.PI*180)+360) % 360);

// setup plot
    var options = {
        series: { shadowSize: 0 }, // drawing is faster without shadows
        yaxis: { min: -40, max: 40 },
        xaxis: { min: -40, max: 40 },
        }

$.plot($("#graph"), [d1], options);
document.getElementById("ehr").innerHTML =  deg;}
droid.startSensingTimed(1,150); 
droid.registerCallback("sensors", display);

</script> 
</body>
</html>

